<template>
  <div class="all">
    <van-nav-bar
      title="我的购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="allCart" v-for="item in goodsData" :key="item.id">
      <van-swipe-cell>
        <van-checkbox v-model="item.checked"></van-checkbox>
        <van-card
          :price="item.s_good.price + '.00'"
          desc="描述信息"
          :title="item.s_good.name"
          :thumb="item.s_good.s_goods_photos[0].path"
        >
          <template #num>
            <van-stepper
              v-model="item.num"
              @change="cartNum({ id: item.id, num: item.num })"
            />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="delCart(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <van-submit-bar :price="shopSum" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
      <!-- <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template> -->
    </van-submit-bar>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { useRoute } from "vue-router";
import { ref, reactive, defineProps, computed } from "vue";
import { put, delNum, get, getget } from "../utils/request";
import itemVue from "../components/item.vue";
// import { useRouter } from "vue-router";
import { useRouter } from "vue-router";
let router = useRouter();
let route = useRoute();
let params = reactive({ project_id: 248 });
let goodsData = ref([]);
let cartNums = computed(() => {
  return goodsData.value.length;
});
console.log(cartNums);
console.log(goodsData.value);

// 请求后台数据;
const getDatas = async () => {
  console.log(sessionStorage.getItem("token"));
  let res = await getget(
    `/shoppingCart?project_id=248`,
    sessionStorage.getItem("token")
  );
  console.log(res);
  goodsData.value = res.result;
  goodsData.value.forEach((ele) => {
    ele.checked = true;
  });
};
getDatas();
// 路由传参
// const goOrder = async () => {
//   let res;
//   // console.log("123");
//   try {
//     res = await postToken("/shoppingCart", sessionStorage.getItem("token"), {
//       goods_id: goodsData.value.id,
//       num: 1,
//       project_id: 248,
//     });
//     console.log("12412414");
//     Toast("正确");
//   } catch (error) {
//     Toast("错误");
//   }
// };
// 全选
const checkedAll = computed({
  get() {
    return goodsData.value.every((ele) => ele.checked);
  },
  set(val) {
    goodsData.value.forEach((ele) => [(ele.checked = val)]);
  },
});

// 更改商品数量
const cartNum = async ({ id, num }) => {
  console.log(id);
  let data = { num };
  let res = await put(`/shoppingCart/${id}`, data);
};
console.log(goodsData);
defineProps({
  goodsData: Array,
});

// 计算价格
const shopSum = computed(() => {
  let res = goodsData.value.filter((ele) => ele.checked === true);
  let sum = res.reduce((sum, item) => {
    return (sum += item.s_good.price * item.num * 100);
  }, 0);
  return sum;
});

// 删除
const delCart = async (id) => {
  let res = await delNum(`/shoppingCart/${id}`);
  getDatas();
};
// 轻提示
const onSubmit = () => Toast("点击按钮");
// const onClickLink = () => Toast('修改地址');

// 顶部导航栏
const onClickLeft = () => history.back();
</script>

<style lang="scss" scoped>
.all {
  padding-bottom: 87px;
}
.allCart {
  padding: 10px;
  display: flex;
  // flex-direction: column;
  justify-content: center;
}
.van-card {
  width: 91%;
  // background-color: skyblue;
  border-radius: 25px;
  margin-left: 25px;
}
.van-swipe-cell {
  // display: flex;
  position: relative;

  .van-checkbox {
    position: absolute;
    left: 0;
    top: 0.4rem;
    z-index: 99;
  }
}
.van-submit-bar {
  margin-bottom: 0.5rem;
}
.goods-card {
  margin: 0;
  //   background-color: @white;
}

.delete-button {
  height: 100%;
}
</style>
